import React, { useState } from 'react';
import MonacoEditor from 'react-monaco-editor';
// import modal from 'monaco-editor/esm/vs/editor/contrib/hover/hover.js';

const initStr = ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n');

export default function SetMonaco(props) {
    const [code, setCode] = useState(initStr)
    // const [model, setModel] = useState()
    // const [modelUri, setModelUri] = useState()
    const { languageID, languageProvider, languageConfig, suggestions, jsonCode } = props;

    //编辑器默认配置项
    const _initOptions = {
        selectOnLineNumbers: true,
        renderSideBySide: false,
        automaticLayout: true,
        // scrollBeyondLastLine: false,
        // formatOnPaste: true,
        // contextmenu: false, // 禁止右键
        // fixedOverflowWidgets: true, // 超出编辑器大小的使用fixed属性显示
        // quickSuggestions: false, // 默认的提示关掉
        // minimap: {
        //     // 缩略图
        //     enabled: false,
        // },
        // scrollbar: {
        //     // 滚动条
        //     horizontalScrollbarSize: 6,
        //     verticalScrollbarSize: 6,
        // },
        // lineNumbersMinChars: 3, // 最少显示3位长的行号
        // lineNumbers: 'on', // 是否显示行号
        // wordWrap: 'on', // 是否可以换行
    };

    function _initChange(newValue, e) {
        // console.log(newValue);
        setCode(newValue);
        props.getCode && props.getCode(newValue);
    }
    function xhr() {
        return new Promise((resolve, reject) => {
            // setTimeout(() => reject(new Error('fail')), 3000)
            setTimeout(() => resolve('Hello Yilia...'), 500)
        });
    }

    //输入之后的回调
    const _editorDidMountHandle = (editor, monaco) => {
        monaco.languages.register({ id: languageID })
        if (languageProvider) {
            monaco.languages.setMonarchTokensProvider(languageID, languageProvider);
        }
        if (languageConfig) {
            monaco.languages.setLanguageConfiguration(languageID, languageConfig)
        }
        if (suggestions) {
            monaco.languages.registerCompletionItemProvider(languageID, {
                provideCompletionItems(model, position, context, token) {
                    return {
                        suggestions: suggestions,
                    };
                },
                triggerCharacters: [':'], // 触发提示的字符，可以写多个
            });
            editor.focus();
        }
        // setModelUri(monaco.Uri.parse('./foo.json'))
        // setModel(monaco.editor.createModel(jsonCode, 'json', modelUri))

        // // configure the JSON language support with schemas and schema associations
        // monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
        //     validate: true,
        //     schemas: [
        //         {
        //             uri: 'http://myserver/foo-schema.json', // id of the first schema
        //             fileMatch: [modelUri.toString()], // associate with our model
        //             schema: {
        //                 type: 'object',
        //                 properties: {
        //                     p1: {
        //                         enum: ['v1', 'v2']
        //                     },
        //                     p2: {
        //                         $ref: 'http://myserver/bar-schema.json' // reference the second schema
        //                     }
        //                 }
        //             }
        //         },
        //         {
        //             uri: 'http://myserver/bar-schema.json', // id of the second schema
        //             schema: {
        //                 type: 'object',
        //                 properties: {
        //                     q1: {
        //                         enum: ['x1', 'x2']
        //                     }
        //                 }
        //             }
        //         }
        //     ]
        // });
        // -------------------
        // monaco.languages.registerHoverProvider(languageID, {
        //     provideHover: function (model, position) {
        //         console.log('model: ', model)
        //         console.log('position: ', position)
        //         return xhr().then(function (res) {
        //             return {
        //                 range: {
        //                     startLineNumber: position.lineNumber,
        //                     endLineNumber: model.getLineCount(),
        //                     startColumn: position.column,
        //                     endColumn: model.getLineMaxColumn(model.getLineCount())
        //                 },
        //                 contents: [
        //                     { value: '**SOURCE**' },
        //                     { value: res }
        //                 ]
        //             };
        //         });
        //     }
        // });
        // monaco.editor.setModelMarkers(editor.getModel(), 'owner', [
        //     {
        //         startLineNumber: 2,
        //         endLineNumber: 2,
        //         startColumn: 1,
        //         endColumn: 10,
        //         severity: monaco.MarkerSeverity.Error,// 错误类型 Hint = 1, Info = 2, Warning = 4, Error = 8
        //         message: `Syntax error语法错误`,//错误提示
        //         source: 'ESLint',
        //         code: 'asdasdas',
        //         // code?: string | {
        //         //     value: string;
        //         //     target: Uri;
        //         // };
        //         // relatedInformation?: IRelatedInformation[]; // {resource: Uri; message: string; startLineNumber: number; startColumn: number; endLineNumber: number; endColumn: number;}
        //         // tags?: MarkerTag[];// Unnecessary = 1, Deprecated = 2
        //     },
        // ])


        // monaco.languages.registerCodeActionProvider(languageID, {
        // //     // model: editor.ITextModel, range: Range, context: CodeActionContext, token: CancellationToken
        //     provideCodeActions: (model, range, context, token) => {
        //         console.log('model: ', model)
        //         console.log('range: ', range)
        //         console.log('context: ', context)
        //         console.log('token: ', token)
        //         return []
        //         // title: string;
        //         // command?: Command;
        //         // edit?: WorkspaceEdit;
        //         // diagnostics?: editor.IMarkerData[];
        //         // kind?: string;
        //         // isPreferred?: boolean;
        //         // disabled?: string;

        //         return [{
        //             title: '11111',
        //             kind: '22222',
        //             command: {
        //                 id: '1234',
        //                 title: '错误了错误了',
        //                 tooltip: 'hhhhhhhh',
        //                 arguments: []
        //             },
        //             isPreferred: true,
        //             disabled: true,
        //         }]
        //     },
        // })
        // -------------------
    };

    return (
        <MonacoEditor
            width="100%"
            height="500"
            language={languageID}
            defaultValue={code}
            theme="vs-dark"
            options={_initOptions}
            onChange={_initChange}
            editorDidMount={_editorDidMountHandle}
            {...props}
        />
    );
}
